<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="assets/css/map.css" rel="stylesheet">
		<link href="assets/css/leaflet.css" rel="stylesheet">
		<title>leaflet</title>
	</head>

	<body>
		
		<div id="map"></div>
		<div class="btns" style="text-align: center;margin-top: 20px;">
			<button onclick="onStart()">播放</button>
			<button onclick="onPause()">暂停</button>
			<select onchange="onSpeed(this.value)">
				<option value="1000">正常</option>
				<option value="2000">2倍</option>
				<option value="4000">4倍</option>
				<option value="6000">6倍</option>
				<option value="8000">8倍</option>
				<option value="10000">10倍</option>
			</select>
			<progress value="0" max="100" id="fileProgress"></progress>
		</div>
		
		<script src="assets/js/leaflet.js"></script>
		<script src="assets/js/leaflet-trackplayer.umd.cjs"></script>
		<script src="data/data.js"></script>
		<script>
			let map = L.map("map", {
				zoom: 12,
				maxZoom: 18,
				center: [34.269701076858354, 108.94729614257814],
			});
			L.tileLayer(
				"http://{s}.tile.osm.org/{z}/{x}/{y}.png"
			).addTo(map);
			map.fitBounds(path);
			// TrackPlayer初始化
			let track = new L.TrackPlayer(path, {
				markerIcon: L.icon({
					iconSize: [27, 54],
					iconUrl: "assets/img/car.png",
					iconAnchor: [13.5, 27],
				}),
				speed: 1000,
				weight: 5, // 轨迹线宽度
				passedLineColor: 'blue', // 已行驶轨迹部分的颜色
				notPassedLineColor: 'red', // 未行驶轨迹部分的颜色
				panTo: true, // 地图跟随移动
				// 轨迹箭头样式
				polylineDecoratorOptions: {
					patterns: [{
						offset: 0, // 箭头位置在轨迹线的末尾
						repeat: 50, // 不重复，只在末尾显示一个箭头
						symbol: L.Symbol.arrowHead({
							pixelSize: 12, // 箭头大小
							pathOptions: {
								color: 'yellow', // 箭头颜色
								fillOpacity: 0, // 填充透明度
								weight: 2,// 线条粗细
								opacity: 0, //线条透明度
							}
						})
					}]
				},
			});
			track.addTo(map);
			// 进度
			const progressBar = document.getElementById('fileProgress');
			// TrackPlayer事件监听
			track.on("start", () => {
				console.log('start')
			});
			track.on("pause", () => {
				console.log('pause')
			});
			track.on("finished", () => {
				console.log('finished')
			});
			track.on("progress", (progress, {
				lng,
				lat
			}, index) => {
				progressBar.value = progress * 100;
				// track.setProgress(progress);
			});
			// 播放
			const onStart = () => {
				track.start();
			}
			// 暂停
			const onPause = () => {
				track.pause();
			}
			// 速度
			const onSpeed = (event) => {
				track.setSpeed(Number(event));
			}
		</script>
	</body>


</html>